<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';

interface User {
  age?: number;
  name?: string;
}

const { age = 0.01, name = '蔡坤' } = defineProps<User>()

const emits = defineEmits<{
  (e: 'change', value: number): void
  (e: 'log-name', value: string): void
}>()

</script>

<template>
  <div class="app">
    <div>
      <span @click="emits('change',age)">用户名: {{ name }}</span>
    </div>
    <div>
      <span @click="emits('log-name',name)">年龄: {{ age }}</span>
    </div>
  </div>
</template>

<style scoped>
  .app {
    background-color:crimson;
    border: 2px solid #aeaeae;
  }
  .app span {
    cursor: pointer;
  }
  .app span:hover {
    color: #fff;
    background-color: #000;
  }
</style>